import React from 'react';
import {useLocation} from "react-router-dom";
import {SecurityUser} from "type/entity/SecurityUser";
import TreeEnhance, {TreeDataNodeProps} from "common/tree/TreeEnhance";
import {Space, Tag} from "antd";

/**
 * 用户角色管理组件,此组件用来给用户分配角色
 */
const UserRoleComponent = () => {
    const user = useLocation().state as SecurityUser;
    const footer = <>
        <p style={{fontSize: "18px", fontWeight: "bold"}}>操作说明 : </p>
        <ul>
            <li>选择角色后, 点击提交修改按钮即可修改用户角色权限</li>
            <li>提交修改并后就不可以撤销到初始状态</li>
        </ul>
    </>;
    const titleRender = (node: TreeDataNodeProps) => {
        return <Space>
            <Space style={{
                paddingInlineStart: "6px",
                fontSize: "12px",
                fontWeight: "bold",
                width: "120px",
                minWidth: "120px",
            }}>{node.title as string}</Space>
            <Tag color={"#134539"}>{node.explain}</Tag>
        </Space>;
    };
    return (
        <TreeEnhance
            titleRender={titleRender}
            optionId={user.id}
            dataUrl={"/manager/admin/user-role/authority-tree/"}
            updateUrl={"/manager/admin/user-role/authority-tree"}
            refreshUrl={"/root/refresh/login-user/" + user.username}
            title={"用户角色权限"}
            subText={user.username}
            tagInfo={user.identity}
            backupText={"用户列表"}
            footer={footer}
            />
    );
};

export default UserRoleComponent;